<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>患者信息管理</title>
    <link rel="stylesheet" href="../dist/css/layui.css">
    <link rel="stylesheet" href="../layui/css/modules/layer/default/layer.css">
</head>
<body>

<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">疫情可视化系统</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>

        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <a href="javascript:;">
                    <img src="../img/admin2.png" class="layui-nav-img">
                    Admin
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:window.location ='regist.html';">用户注册</a></dd>
                    <dd><a href="javascript:window.location ='login.html';">退出登录</a></dd>
                </dl>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:window.location = 'country.html';">全国疫情统计</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:window.location ='guizhou.html';">贵州省</a></dd>
                        <dd><a href="javascript:window.location ='yunnan.html';">云南省</a></dd>
                        <dd><a href="javascript:window.location ='xianggang.html';">香港</a></dd>
                    </dl>
                </li>

                <li class="layui-nav-item "><a href="javascript:window.location = 'admin.html';">管理员列表</a></li>
                <li class="layui-nav-item"><a href="javascript:window.location = 'patience.html'">患者信息管理</a></li>
            </ul>
        </div>
    </div>

    <div class="layui-body" align="center">
        <!--中心区域-->
        <table class="layui-hide" id="test" lay-filter="test"></table>
        <!--患者信息修改弹出框-->
        <div class="layui-row" id="popPatience" style="display:none;">
            <div class="layui-col-md11">
                <form class="layui-form" lay-filter="formTestFilter2121">
                    <div class="layui-form-item">
                        <label class="layui-form-label">省份名：</label>
                        <div class="layui-input-inline">
                            <input type="text" name="provinceName" readonly="readonly"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">城市名：</label>
                        <div class="layui-input-inline">
                            <input type="text" name="provinceShortName" readonly="readonly"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">确诊总数：</label>
                        <div class="layui-input-inline">
                            <input type="text" name="confirmedCount" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">疑似病例：</label>
                        <div class="layui-input-inline">
                            <input type="text" name="suspectedCount" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">治愈人数：</label>
                        <div class="layui-input-inline">
                            <input type="text" name="curedCount" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">死亡人数：</label>
                        <div class="layui-input-inline">
                            <input type="text" name="deadCount" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">动态：</label>
                        <div class="layui-input-inline">
                            <input type="text" name="comment" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn layui-btn-normal" style="width: 200px" lay-filter="formDemo">提交</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        疫情可视化系统
    </div>
</div>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit" style="background-color: #0000FF">编辑</a>
</script>


<script src="../js/layui.js" charset="utf-8"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container demoTable">

        <button class="layui-btn" id="test3">通过excel导入数据</button>
        <button class="layui-btn " data-type="getCheckData">以excel的格式导出所选数据</button>

    </div>
</script>

<script>
    layui.use('table', function () {

        var form = layui.form;
        var layer = layui.layer;
        form.on('submit(formDemo)', function (data) {
            // console.log(data.field);
            $.post("/updatePatience", data.field, function (result) {
                if (result.code == 0) {
                    layer.msg("更新成功");
                    setTimeout('window.location.reload()', 1);
                } else {
                    layer.msg("更新失败");
                    setTimeout('window.location.reload()', 1);
                }
            });
        });

        var table = layui.table;
        table.render({
            elem: '#test'
            , url: '/getPatienceAll'
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , defaultToolbar: []
            , title: '疫情数据表'
            , cols: [[
                {type: 'checkbox'}
                , {field: 'id', title: 'ID', width: 80, sort: true,}
                , {field: 'provinceName', title: '省份名', width: 200}
                , {field: 'provinceShortName', title: '城市名', width: 200}
                , {field: 'confirmedCount', title: '确诊总数', width: 150}
                , {field: 'suspectedCount', title: '疑似病例', width: 150}
                , {field: 'curedCount', title: '已治愈人数', width: 150}
                , {field: 'deadCount', title: '死亡人数', width: 150}
                , {field: 'comment', title: '动态', width: 400}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
            ]]
        });

        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            //console.log(data.id);
            if (obj.event === 'edit') {
                //console.log('点击了')
                var layer = layui.layer;
                layer.open({
                    type: 1,
                    title: "患者信息修改界面",
                    area: ['400px', '500px'],
                    offset: '20px',
                    content: $("#popPatience").html(),
                    success: function () {
                        //console.log('弹出id'+ data.id);
                        $.get("/getPatienceById", "id=" + data.id, function (result) {
                            // console.log(result);
                            // console.log(result.data);
                            var inputVal = result.data;
                            $("[name='provinceName']").attr('placeholder', inputVal.provinceName);
                            $("[name='provinceShortName']").attr('placeholder', inputVal.provinceShortName);
                            $("[name='confirmedCount']").attr('placeholder', inputVal.confirmedCount);
                            $("[name='suspectedCount']").attr('placeholder', inputVal.suspectedCount);
                            $("[name='curedCount']").attr('placeholder', inputVal.curedCount);
                            $("[name='deadCount']").attr('placeholder', inputVal.deadCount);
                            $("[name='comment']").attr('placeholder', inputVal.comment);
                        })
                    },
                    cancel: function () {
                        // 你点击右上角 X 取消后要做什么
                        setTimeout('window.location.reload()', 1);
                    }

                })
            }
        });
        var $ = layui.$, active = {
            getCheckData: function () { //获取选中数据
                var checkStatus = table.checkStatus('test')
                    , data = checkStatus.data;
                //layer.alert(JSON.stringify(data));
                //layer.alert(data);
                console.log(data);
                var ids = new Array(data.length);
                for (var i = 0; i < data.length; i++) {
                    ids[i] = data[i].id;
                }
                console.log(ids);
                $.get("/exportExcel?id="+ids,function (result){
                    console.log("请求来了");
                })
                // console.log(data);
                // console.log(data.id);
                location.href = "/exportExcel?id=" + ids;
            }
        };

        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });

    layui.use(['upload', 'element', 'layer'], function () {
        var $ = layui.jquery
            , upload = layui.upload
            , element = layui.element
            , layer = layui.layer;
        upload.render({
            elem: '#test3'
            , url: '/patience_importExcel' //改成自己的上传接口
            , accept: 'file' //普通文件
            , done: function (res) {
                layer.msg('上传成功');
                console.log(res);
                window.location.reload();
            }
        });
    });

</script>
</body>
</html>